<template>
	<view class="teamHistory">
		<template v-if="list.length !=0">
			<view v-for="(item,index) in list" class="box" :key="item.teamId">
				<view class="left">
					<view class="top f18 overflow-ellipsis">{{item.teamName}}</view>
					<view class="middle f14">{{item.member.length }} / {{item.teamNum}}</view>
				</view>
				<view class="right">

					<view class="tag-view">
						<view class="mjcTag" :key="tag" v-for="tag in item.tags ">{{tag}}</view>
					</view>

				</view>
				<view class="rightTag shuipingchuizhi">
					<view class="statu1 w100" v-show="item.status===1">
						<text>已审核</text>
					</view>
					<view class="statu2 w100" v-show="item.status===0">
						<text>已驳回</text>
					</view>
					<view class="statu3 w100" v-show="item.status===null">
						<text>未审核</text>
					</view>
				</view>

			</view>
		</template>
		<template v-else>
			<notFoundData />
		</template>
	</view>
</template>

<script>
	import notFoundData from '@/components/notFoundData/index.vue'
	import * as utils from '@/utils/index.js'
	export default {
		components: {
			notFoundData
		},
		data() {
			return {
				list: []
			}
		},
		methods: {

		},
		async created() {
			try {
				const result = await this.$mjcrequest.request({
					url: this.$api.getMyTeam,
					header: this.$aplsjsonheader,
					method: 'GET'
				})
				console.log(result);
				if (result.length == 0) return
				this.list = result
			} catch (e) {
				this.errMessageToast(e)
				//TODO handle the exception
			}
		}
	}
</script>

<style lang="less" scoped>
	.teamHistory {
		padding: 0 15rpx;
		background-color: #fdfdfd;
		padding-bottom: 20rpx;
		height: 100vh;

		.box {
			margin: 25rpx 0;
			width: 100%;
			height: 150rpx;
			background-color: #fff;
			border-radius: 15rpx;
			padding: 10rpx 20rpx 15rpx 20rpx;
			box-sizing: border-box;
			font-weight: 550;
			display: flex;
			box-shadow: 0 4px 8px 2px #f0f1f1 !important;

			.left {
				width: 50%;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
			}

			.right {
				flex: 1;
				box-sizing: border-box;

				.tag-view {
					width: 100%;
					height: 100%;
					flex-wrap: wrap;
					white-space: pre-wrap;
					word-wrap: break-word;
					text-align: right;
					display: flex;
					align-items: center;
					overflow: auto;

					.mjcTag {
						padding: 5rpx;
						color: #2979ff;
						border-color: #2979ff;
						border-radius: 2px;
						font-size: 12px;
						line-height: 14px;
						border-width: 1rpx;
						border-style: solid;
						font-weight: 300;
						display: inline-block;
						margin: 12rpx;
					}
				}

			}
		}
	}
</style>
